<!-- 采购单管理 -->
<template>
  <view class="purchaseOrder" :style="{ paddingTop: nav_height + 'px' }">
    <van-head title="采购单管理">
      <template #left>
        <view class="back" @click="gotothispage">
          <van-icon name="arrow-left" />
          <text> 返回 </text>
        </view>
      </template>
    </van-head>
    <view class="search_box flexb">
      <view class="search ">
        <van-search
          :value="searchValue"
          shape="round"
          background="rgba(255, 255, 255, 1)"
          placeholder="请输入编号、供应商、采购类型进行查找"
          @change="onSearch"
        />
      </view>
      <view class="screen flexc f28" @click="showFilters">
        <van-icon name="filter-o" />筛选
      </view>
    </view>
    <view class="content">
      <view class="item_box tc mt10" v-for="(item, index) in OrderList" :key="index">
        <view class="plan_number_box flexb">
          <view class="plan_number_box_left f24">
            采购计划编号：<text @click="goOrderDetails(item)">{{ item.purchase_sn}}</text>
          </view>
          <view class="plan_number_box_right f24" @click="detail(item)">
            详情<van-icon name="arrow-down"/>
          </view>
        </view>
        <view class="order_type_box flexb mt20 f24">
          <view>
            采购单类型：<text>{{ item.order_type_name }}</text>
          </view>
          <view class="state-box br20 tc f24"  v-if="item.show_status_id == '0'" style="background: #d12312">
            {{ item.show_status }}
          </view>
          <view class="state-box br20 tc f24" v-if="item.show_status_id == '1'" style="background: #ef9c2b">
            {{ item.show_status }}
          </view>
          <view class="state-box br20 tc f24" v-if="item.show_status_id == '4'" style="background: #62b158">
            {{ item.show_status }}
          </view>
          <view class="state-box br20 tc f24" v-if="item.show_status_id == '5'" style="background: #cc8a3e">
            {{ item.show_status }}
          </view>
        </view>
        <view class="expected-date disFlex f24">期望送货日期：{{ item.expect_time }}</view>
        <view class="btn_sytle disFlex jcend flexWrap">
              <van-button  class="cancel-style" v-if="item.cancel_status.status == 1" type="default" @click="onCancel(item)" >取消计划</van-button>
              <van-button  type="default" v-if="item.editother_status.status == 1" @click="editProject(item)" >修改计划 </van-button>
              <van-button  type="default" v-if="item.purchaseok_status.status ==1" @click="confirmWarehousing(item)">确认入库 </van-button>
              <van-button  type="default" v-if="item.revokepurchaseok_status.status == 1" @click="revokePurchaseok(item)" >撤销入库</van-button >
              <van-button  type="default" v-if="item.warehouse_status.status == 1" @click="goWarehouseWarrant(item)">入库单 </van-button>
        </view>
      </view>
    </view>
    <view class="btn-box flexc mt100">
      <van-button plain type="primary" @click="addPlan">
        <van-icon name="add-o" size="16px" />
        <text>添加采购计划</text>
      </van-button>
    </view>

    <!-- 弹框 -->
    <van-overlay :show="detailShow">
      <view class="wrapper flexc">
        <view class="block">
          <view class="title disJcsb">
            <view class="title_left f36 fwbold"> 详情 </view>
            <view class="title_right tc fwbold" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <van-cell-group>
            <van-field
              :value="detailForm.purchase_sn"
              label="采购计划编号："
              readonly
              type="text"
            ></van-field>
            <van-field
              :value="detailForm.order_type_name"
              readonly
              label="采购单类型："
            ></van-field>
            <van-field
              :value="detailForm.applyname"
              readonly
              label="申请人姓名"
            ></van-field>
            <van-field
              :value="detailForm.lock_order_examine_name"
              readonly
              label="是否收单"
            ></van-field>
            <van-field
              :value="detailForm.show_status_id"
              name="show_status"
              readonly
              label="当前状态："
            >
              <view slot="input" class="statustext"  :style="{ background: onStatusList.find((item) => item.value == detailForm.show_status_id ).color,}">
                {{ onStatusList.find((item) => item.value == detailForm.show_status_id ).label}}
              </view>
            </van-field>
            <van-field
              :value="detailForm.apply_time"
              readonly
              label="申请日期："
            ></van-field>
            <van-field
              :value="detailForm.expect_time"
              readonly
              label="期望送货日期："
            ></van-field>
            <van-field
              :value="detailForm.remarks"
              readonly
              label="备注："
            ></van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>

    <!-- 筛选条件 -->
    <van-popup
      :show="show"
      custom-style="width: 70%"
      @close="onFilterClose"
      position="right"
      root-portal
    >
      <!-- closeable 关闭图标 -->
      <view class="popbox">
        <view class="top flexb f26">
          <view>筛选条件</view>
          <van-icon @click="offShow" name="clear" size="38rpx" />
        </view>
        <view class="form">
          <van-cell-group>
            <van-input
              v-model="screenForm.purchase_sn"
              required
              clearable
              label="采购计划编号"
              placeholder="采购计划编号"
              :norequired="true"
            ></van-input>
            <van-input
              v-model="screenForm.purchase_sn_detail"
              clearable
              label="采购单编号"
              placeholder="采购单编号"
              :norequired="true"
            ></van-input>
            <my-picker
              :form="screenForm"
              name="order_type_name"
              value-key="order_type_name"
              @click-input="changeOrderType"
              :columns="order_type_list"
              label="采购单类型"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-picker
              :form="screenForm"
              name="supplier_name"
              value-key="supplier_name"
              @click-input="changeSupplier"
              :columns="supplier_list"
              label="供应商名称"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-picker
              :form="screenForm"
              name="backup_goods_examine_name"
              value-key="backup_goods_examine_name"
              @click-input="changeBackup"
              :columns="backup_list"
              label="备货情况"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-picker
              :form="screenForm"
              name="purchase_examine_name"
              value-key="purchase_examine_name"
              @click-input="changeExamine"
              :columns="purchase_examine_list"
              label="核价情况"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-picker
              :form="screenForm"
              name="warehousing_name"
              @click-input="changeWarehousingr"
              value-key="warehousing_name"
              :columns="warehousing_list"
              label="入库情况"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-picker
              :form="screenForm"
              name="accounting_examine_name"
              value-key="accounting_examine_name"
              @click-input="changeAccounting"
              :columns="accounting_examine_list"
              label="会计凭证情况"
              placeholder="选择"
              :norequired="true"
            ></my-picker>
            <my-calendar
              :form="screenForm"
              name="apply_start_time"
              @click-input="changeDate"
              label="申请日期"
              placeholder="申请日期"
              :norequired="true"
            >
            </my-calendar>
            <my-calendar
              :form="screenForm"
              name="expect_start_time"
              @click-input="changeDate"
              label="期望送货日期"
              placeholder="期望送货日期"
              :norequired="true"
            >
            </my-calendar>
            <my-calendar
              :form="screenForm"
              name="add_start_time"
              @click-input="changeDate"
              label="入库日期"
              placeholder="入库日期"
              :norequired="true"
            >
            </my-calendar>
          </van-cell-group>
        </view>
        <view class="btn-style flexb">
          <van-button color="#999999" type="info" @click="screenReset">重置</van-button>
          <van-button color="#62B158" type="info" @click="screenSubmit" >提交</van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { onStatusList } from "../../utils/types";
export default {
  data() {
    return {
      form: {}, //查询表单
      show: false,
      detailForm: {},
      searchValue: "",
      OrderList: [],
      detailShow: false,
      onStatusList,
      screenForm: {
        //筛选
        purchase_sn: "", //采购计划编号
        purchase_sn_detail: "", //采购单编号
        order_type_name: "", //采购单类型
        order_type: "", //采购单类型id
        supplier_name: "", //供应商名称
        supplier_id: "", //供应商名称id
        backup_goods_examine_name: "", //备货情况
        backup_goods_examine_status: "", //备货情况id
        purchase_examine_name: "", //核价情况
        purchase_examine_status: "", //核价情况id
        warehousing_name: "", //入库情况
        warehousing_status: "", //入库情况id
        accounting_examine_name: "", //会计凭证情况
        accounting_examine_status: "", //会计凭证情况id
        apply_start_time: "", //申请日期
        expect_start_time: "", //期望送货日期
        add_start_time: "", //入库日期
      },
      order_type_list: [], //采购单类型（下拉数据）
      backup_list: [], //备货情况（下拉数据）
      purchase_examine_list: [], //核价情况（下拉数据）
      warehousing_list: [], //入库情况（下拉数据）
      supplier_list: [], //供应商（下拉数据）
      accounting_examine_list: [], //会计审核（下拉数据）
      childlist: [],
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {},
  methods: {
    gotothispage() {
      uni.switchTab({
        url: "./../ele/ele",
      });
    },

    /*撤销入库*/
    revokePurchaseok(item) {
      uni.navigateTo({
        url: "./revocation?purchase_sn_detail=" + item.purchase_sn_detail,
      });
    },
    /*采购单编号*/
    goOrderDetails(item) {
      uni.navigateTo({
        url: "./purchaseOrderDetails?purchase_sn=" + item.purchase_sn,
      });
    },
    /*取消计划*/
    async onCancel(item) {
      let res = await this.$ajax.onCancelorder({
        purchase_sn_detail: item.purchase_sn_detail,
      });
      if (res.code == 1) {
        this.getOnIndex();
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      } else {
        this.getOnIndex();
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*添加采购计划*/
    addPlan() {
      uni.navigateTo({
        url: "../procurementPlan/procurementPlan",
      });
    },
    /*获取列表信息列*/
    async getOnIndex() {
      let res = await this.$ajax.onIndex();
      if (res.code == 1) {
        this.OrderList = res.data.rows;
        this.order_type_list = res.data.search_list.order_type_list; //采购单类型
        this.backup_list = res.data.search_list.backup_list; //备货情况
        this.purchase_examine_list = res.data.search_list.purchase_examine_list; //核价情况
        this.warehousing_list = res.data.search_list.warehousing_list; //入库情况
        this.supplier_list = res.data.search_list.supplier_list; //供应商
        this.accounting_examine_list = res.data.search_list.accounting_examine_list; //会计审核
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*筛选弹出层*/
    showFilters() {
      this.show = true;
    },
    onFilterClose() {
      this.show = false;
    },
    /*重置（筛选）*/
    screenReset() {
      this.screenForm = {};
      this.getOnIndex();
    },
    /*提交（筛选）*/
    async screenSubmit() {
      let res = await this.$ajax.onSearchindex(this.screenForm);
      if (res.code == 1) {
        if (res.data.rows.length > 0) {
          this.OrderList = res.data.rows;
          this.show = false;
          this.screenForm = {}; // 重置数据
        } else {
          this.OrderList = res.data.rows;
          this.show = false;
          uni.showToast({
            title: "未查询到相关数据信息",
            icon: "none",
          });
          this.screenReset(); //重置
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },



    /*搜索*/
    async onSearch(value) {
      let res = await this.$ajax.onSearchindex({
        search_context: value.detail,
      });
      if (res.code == 1) {
        this.OrderList = res.data.rows;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*采购单类型（筛选）*/
    changeOrderType(key, value) {
      this.$set(this.screenForm, "order_type", value["order_type"]); //提交给后台id
      this.$set(this.screenForm, key, value["order_type_name"]);
    },
    /*供应商（筛选）*/
    changeSupplier(key, value) {
      this.$set(this.screenForm, "supplier_id", value["supplier_id"]);
      this.$set(this.screenForm, key, value["supplier_name"]);
    },
    /*备货情况（筛选）*/
    changeBackup(key, value) {
      this.$set( this.screenForm, "backup_goods_examine_status", value["backup_goods_examine_status"]);
      this.$set(this.screenForm, key, value["backup_goods_examine_name"]);
    },
    /*核价情况（筛选）*/
    changeExamine(key, value) {
      this.$set(this.screenForm, "purchase_examine_status",value["purchase_examine_status"]);
      this.$set(this.screenForm, key, value["purchase_examine_name"]);
    },
    /*入库情况（弹框）*/
    changeWarehousingr(key, value) {
      this.$set(this.screenForm, "warehousing_status", value["warehousing_status"]);
      this.$set(this.screenForm, key, value["warehousing_name"]);
    },
    /* 会计凭证情况（弹框）*/
    changeAccounting(key, value) {
      this.$set(this.screenForm, "accounting_examine_status", value["accounting_examine_status"]);
      this.$set(this.screenForm, key, value["accounting_examine_name"]);
    },
    /*日期(筛选)*/
    changeDate(key, value) {
      this.$set(this.screenForm, [key], value);
      this.dataShow = true;
    },
    onDateConfirm(data) {
      this.screenForm.apply_start_time = this.formatDate(data.detail); //申请日期
      this.screenForm.expect_start_time = this.formatDate(data.detail); //期望送货日期
      this.screenForm.add_start_time = this.formatDate(data.detail); //入库日期
      this.dataShow = false;
    },
    onDateClose() {
      this.dataShow = false;
    },

    /*入库单*/
    goWarehouseWarrant(item) {
      uni.navigateTo({
        url: "../purchaseOrder/warehouseWarrant?purchase_sn_detail=" + item.purchase_sn_detail,
      });
    },

    /*关闭*/
    offShow() {
      this.detailShow = false;
      this.show = false;
    },
    /*已入库*/
    beInStorage() {
      uni.navigateTo({
        url: "../purchaseOrder/purchaseOrderBeInStorage",
      });
    },

    /*详情*/
    detail(item) {
      this.detailShow = true;
      this.detailForm = item;
      this.detailForm.current_state = this.goodStockData(item);
    },
    /*确认入库*/
    confirmWarehousing(item) {
      uni.navigateTo({
        url: "../purchaseOrder/confirmWarehousing?purchase_sn_detail=" + item.purchase_sn_detail,
      });
      this.getOnIndex();
    },
    /*修改计划*/
    editProject(item) {
      console.log(item,'item');
      
      uni.navigateTo({
        url: "../procurementPlan/procurementPlan?purchase_sn_detail=" + item.purchase_sn_detail +  "&order_type=" + item.order_type,
        // url: "../procurementPlan/procurementPlan?purchase_sn_detail=" + item.purchase_sn_detail +  "order_type=" + item.order_type,
      });
    },

    goodStockData(item) {
      if (item.purchasing_status == 1) {
        return "待备货";
      } else if (item.purchasing_status == 2) {
        return "待入库";
      } else if (item.purchasing_status == 3) {
        return "已入库";
      }
    },
  },

  mounted() {
    this.getOnIndex(); //页面列表数据
    console.log("加载了！");
    
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    this.childlist = this.allPermission.find( (item) => item.id == uni.getStorageSync("childId")).childlist;
    console.log(this.childlist);

    uni.setNavigationBarTitle({
      title: "采购单管理",
    });
    this.setDetailData({});
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    this.getOnIndex(); //页面列表数据
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss">
.statustext {
  padding: 10rpx 20rpx;
  background: red;
  color: #fff;
  border-radius: 60rpx;
}
// 筛选条件
.popbox {
  height: 100vh;
  width: 100%;
  padding: 4rpx;
  .top {
    padding: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-family: SourceHanSansSC-bold;
  }
  .form {
  }
  .btn-style {
    margin-top: 200rpx;
    padding: 20rpx;
    padding-bottom: 50rpx;
    .van-button {
      width: 180rpx;
    }
  }
}
.purchaseOrder {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 50rpx;

  .search_box {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    padding: 0 20rpx;

    // 搜索
    .search {
      width: 80% !important;

      .van-search {
      }
    }

    // 筛选
    .screen {
    }
  }

  .content {
    width: 100%;
    padding: 10rpx 20rpx;

    .item_box {
      width: 100%;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
      padding: 20rpx 20rpx;

      .plan_number_box {

        .plan_number_box_left {
          color: rgba(16, 16, 16, 1);
          font-family: SourceHanSansSC-regular;
          text {
            color: rgba(46, 136, 238, 1);
          }
        }

        .plan_number_box_right {
          color: rgba(46, 136, 238, 1);
          font-family: SourceHanSansSC-regular;
        }
      }

      .order_type_box {

        // border-bottom: 0.5rpx solid #e7e4e4;
        color: rgba(16, 16, 16, 1);
        font-family: SourceHanSansSC-regular;
        line-height: 40rpx;
        .state-box {
          width: 126rpx;
          line-height: 50rpx;
          color: white;
        }
      }
      // 期望送货日期
      .expected-date {
        font-family: SourceHanSansSC-regular;
        line-height: 40rpx;
        border-bottom: 0.5rpx solid #e7e4e4;
        padding-bottom: 20rpx;
      }

      .btn_sytle {
        margin-top: 14rpx;
        font-size: 12rpx;
        .cancel-style {
          .van-button__text {
            color: red;
          }
        }

        .van-button {
          border-radius: 20rpx;
          margin-left: 10rpx;
          margin-top: 5rpx;
        }
      }
    }
  }
  .btn-box {

    .van-button {
      height: 72rpx;
      border-radius: 50rpx;
      border-color: #bbbbbb;
      color: #62b158;
      font-size: 28rpx;
      line-height: 30rpx;
      font-family: Microsoft Yahei;

      text {
        line-height: 50rpx;
        padding-left: 10rpx;
      }
    }
  }
}

// 弹框样式
.wrapper {
  height: 100%;

  .block {
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 50rpx 22rpx;

    .title {
      width: 100%;

      .title_left {
        color: rgba(16, 16, 16, 1);
        font-family: SourceHanSansSC-medium;
      }

      .title_right {
        color: #ffffff;
        line-height: 36rpx;
      }
    }
    .van-field__label {
      width: 200rpx;
    }
    .btn_style {
      display: flex;
      justify-content: space-evenly;
      margin-top: 100rpx;
      .van-button {
        width: 180rpx;
        height: 72rpx;
        border-radius: 8rpx;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        text-align: center;
        font-family: Microsoft Yahei;
      }
    }
  }
}
</style>